<template>
  <div>
    <van-nav-bar
        title="收货地址"
        left-text="返回"
        
        left-arrow
        @click-left="$router.go(-1)"
       
        />
         <van-empty description="请先添加收货地址" v-if="!addrList.length" />
      
        <van-address-list
          v-model="chosenAddressId"
          :list="addrList"
         
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
        />

        <van-popup v-model="openAddaddressPopup" position="bottom" :style="{ height: '70%' }" >
          <van-address-edit
          :area-list="areaList"
           show-set-default
          
          show-search-result
        
          @save="onSaveAdd"
          
          />
        </van-popup>

        <van-popup v-model="openEditaddressPopup" position="bottom" :style="{ height: '70%' }" >
          <van-address-edit
          :area-list="areaList"
          :address-info="addressinfo"
           show-set-default
          show-delete
          show-search-result
        
          @save="onSaveEdit"
          @delete='onDelete'
          />
        </van-popup>
  </div>
</template>
<script>
import { areaList } from '@vant/area-data';
import {set,get} from "@/utils/local"
console.log(areaList);
export default {
  data() {
    let addrList=get("addr")||[]
    let chosenAddressId=addrList.find(v=>v.isDefault)?.id
    return {
        areaList,
        addrList,
        chosenAddressId,
        openAddaddressPopup:false,// 添加
        openEditaddressPopup:false,// 修改
        addressinfo:{},// 回显数据 编辑收货地址
    }
  },
  mounted(){
    console.log(this.addrList);
  },
  computed:{

  },
  methods:{
     onSaveAdd(val){
       console.log(val);
      //  return
      //  let addrarr=get("addr")||[]

       let addrobj={// 组装收货地址参数
          name:val.name,
          tel:val.tel,
          address:val.province+"/"+val.city+"/"+val.county+"/"+val.addressDetail,
          isDefault:val.isDefault,
          id:new Date().getTime()+'',
          areaCode:val.areaCode
       }
       this.addrList.push(addrobj)
       if(addrobj.isDefault){// 添加收货地址的时候 选择了此地址是默认地址 覆盖其他的默认地址
          this.addrList.map((v,k)=>k==this.addrList.length-1?null:(v.isDefault=false))
       }
       console.log(this.addrList);
       set("addr",this.addrList)// 存本地存储
       // 关闭抽屉
       this.openAddaddressPopup=false

      //  console.log(addr);
      //  addrarr.push(addr)
      //  set("addr",addrarr)
      //  this.$router.go(-1)
     },
     onDelete(val){
        console.log(val);
        this.addrList=this.addrList.filter(v=>v.id!=val.id)
       set("addr",this.addrList)// 存本地存储
          this.openEditaddressPopup=false


     },
     onSaveEdit(val){// 确认修改
          console.log(val);
          // this.onSaveAdd(val)
          // this.openEditaddressPopup=false
          let addrobj={// 组装收货地址参数
          name:val.name,
          tel:val.tel,
          address:val.province+"/"+val.city+"/"+val.county+"/"+val.addressDetail,
          isDefault:val.isDefault,
          id:val.id,
          areaCode:val.areaCode
          }
          // console.log(this.addrList);
          if(addrobj.isDefault){// 如果修改默认地址 
               this.addrList.map(v=>v.isDefault=false)// 其他都为false
          }
          this.addrList.map((v,k)=>{// 找到修改的地址数据
             if(v.id==addrobj.id){
                this.addrList[k]=addrobj// 换掉
             }
          })
          set("addr",this.addrList)// 存本地存储
          this.openEditaddressPopup=false
     },
     onAdd(){// 添加地址
      this.openAddaddressPopup=true
       this.addressinfo={}
     },
     onEdit(item){
      this.openEditaddressPopup=true
      console.log(item);
      let arr=item.address.split("/")
      this.addressinfo={
        ...item,
        province:arr[0],
        city:arr[1],
        county:arr[2],
        addressDetail:arr[3]
      }

     }
  },
}
</script>
<style scoped>

</style>
